<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="纪德朝">
    <title>输入框字符判断</title>
    <style>
    div{
        width: 720px;
        margin: 0 auto;
        /* position: relative; */
    }
    p{
        /* position: absolute; */
        float: right;
    }
    .active{
        color: red;
    }
    </style>
</head>

<body>
    <div>
        <p>输入<span>&#X3000;</span>字</p>
        <form action="">
            <textarea cols="100" rows="10" oninput="onInput()"></textarea>
        </form>
    </div>
    


    <script src="./js/jquery.js"></script>
</body>
<script>
    var sum1 = 0;
    var sum2 = 0;
    var sum = 0;
    function onInput() {
        for (var i = 0; i < $('textarea').val().length; i++) {
            if ($('textarea').val().charCodeAt(i) > 255) {
                sum1 = sum1 + 1;
                console.log('sum1=' + sum1);
            } else {
                sum2 = sum2 + 0.5;
                // console.log('sum2=' + sum2);
            }                
        }
        sum = Math.ceil(sum1 + sum2); 
        $('span').html(sum);       
        console.log('sum=' + sum);
        if(sum>160){
            $('span').addClass('active');
        }else{
            $('span').removeClass('active');
        }
        sum1 = 0;
        sum2 = 0;
    }

</script>

</html>